<!-- 抽屉盒子-高度自适应显示 -->
<template>
  <div class='autoHeight'>
    <div class="example1">
      <div class="title" style="text-align: center;">
        高度自适应显示-抽屉盒子
      </div>
    </div>
    <div class="example">
      <div class="title">
        1、先说个人目前认为比较完美的解决方案，使用grid布局来处理
      </div>
      <div class="demo">
        <div class="switch" @click="switch1 = !switch1">{{ switch1 ? 'close' : 'open' }}</div>
        <div class="grid-demo" :style="{
          'gridTemplateRows': `${switch1 ? 1 : 0}fr`
        }">
          <div class="content-wrap">
            <div class="content">grid布局处理</div>
            <div class="content">grid布局处理</div>
            <div class="content">grid布局处理</div>
            <div class="content">grid布局处理</div>
            <div class="content">grid布局处理</div>
          </div>
        </div>
      </div>
    </div>

    <div class="example">
      <div class="title">
        2、第二种比较直观，出现高度从0过度到auto无法生效的原因是transition只支持固定数字值的属性变化，无法根据auto去进行计算，
        所以直接通过已知的内容去设置好高度，例如5个元素，每个元素30px的高度
      </div>
      <div class="demo">
        <div class="switch" @click="switch2 = !switch2">{{ switch2 ? 'close' : 'open' }}</div>
        <div class="grid-demo" :style="{
          'height': `${switch2 ? 5 * 30 : 0}px`
        }">
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
        </div>
      </div>
    </div>
    <div class="example">
      <div class="title">
        3、第三种实现，不设置高度，通过设置最大高度，实现效果，只要保证最大高度超出元素内容即可，但是存在一定的问题，比如过度属性最终的显示效果是通过最大高度进行过度，如果内容较少，
        那么过度的效果会显示的比较快，比如最大高度1000px，内容高度只有50px，那么过度的效果会显示1000px，如果内容高度为100px，过度时间1s,那么实际盒子过度的时间只有0.1s
      </div>
      <div class="demo">
        <div class="switch" @click="switch3 = !switch3">{{ switch3 ? 'close' : 'open' }}</div>
        <div class="grid-demo" :style="{
          'maxHeight': `${switch3 ? 1000 : '0'}px`
        }">
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
          <div class="content">控制父盒子的height</div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
const switch1 = ref(true); // 例子一开关
const switch2 = ref(true); // 例子一开关
const switch3 = ref(true); // 例子一开关

</script>

<style lang='scss' scoped>
.autoHeight {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 300px;

  &>div .title {
    font-size: 18px;
    line-height: 26px;
    padding: 20px 0;
    width: 700px;
  }

  .example {
    .demo {
      .switch {
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 10px;
        background-color: rgb(184, 184, 184);
        cursor: pointer;
      }

      .grid-demo {
        width: 250px;
        border-radius: 5px;
        display: grid;
        grid-template-rows: 0fr;
        transition: 0.3s;
        overflow: hidden;
        background-color: #b9b9b949;
        margin-top: 20px;
        padding: 0 20px;

        .content-wrap {
          min-height: 0;
        }
      }

      .content {
        height: 30px;
        line-height: 30px;
        color: #000;
      }
    }
  }
}
</style>